
// initData方法 准备父元素和当前级别
// handle监听事件
// render渲染页面
// 

// 对象收缩变量
var game = {
    // el是dom元素
    el:null,
    // level是游戏等级
    level:null,

    // 游戏区域的宽度
    gameWidth:600,

    // 游戏区域的高度
    gameHeight:600,

    // 图片数量
    picNum:20,

    // 比对数组
    judgeArr:[],

    // 已经翻转过来的图片总数量
    turnNum:0,

    // 防抖函数,延时器标识符
    timer:null,

    // 走了多少步
    stepNum:0,

    // 步数对应的dom元素
    progressDom:null,

    // 进度对应的dom元素
    stepDom:null,

    // 等级选择对应的dom元素
    level_select:null,

    // 新游戏按钮对应的dom元素
    new_game:null,

    // 游戏所花时间
    gameTime:0,

    // 初始化游戏
    init:function( options ){
        this.initData( options );
        this.render();
        this.handle();
    },

    // 初始化数据
    initData:function( options ){
        this.el = options.el;
        this.level = options.level;

        this.progressDom = document.querySelector(".progress");
        this.stepDom = document.querySelector(".steps");
        this.level_select = document.querySelector("#level_select");
        this.new_game = document.querySelector(".new_game");

        //  级别   块数
        //  1级别  2*2
        //  2级别  4*4
        //  3级别  6*6

        // 块的个数
        this.blocks = (this.level*2)*(this.level*2);

        this.dataArr = this.getDataArr();


        // 已经翻转过来的图片总数量
        this.turnNum = 0;

        // 走了多少步
        this.stepNum = 0;

        // 游戏时间
    	this.gameTime = 0;
    },

    // 获取图片地址数组
    getDataArr:function(){
        // 得到所有随机图片地址的数组
        var randomArr = this.getRandomArr();

        // 定义一个空数组
        var arr = [];

        // 多少对图片
        var halfBlocks = this.blocks/2;

        // 生成图片数组
        for(var i = 0 ; i < halfBlocks ; i++ ){
            var num = randomArr[i];
            var info = {
                index: num,
                url: "url(images/"+num+".png)",
            }
            arr.push( info , info );
        }

        return this.shufffle( arr );
    },

    // 获取随机图片地址
    getRandomArr:function(){
        var arr = [];
        for(var i = 1; i <= this.picNum ; i++){
            arr.push( i );
        }
        return this.shufffle( arr );
    },

    // 打乱函数
    shufffle:function( myarr ){
        return myarr.sort(function( ){
            return Math.random()-0.5;
        })
    },

    // 渲染
    render:function(){
        var blockWidth = this.gameWidth/(this.level*2);
        var blockHeight = this.gameHeight/(this.level*2);

        this.el.innerHTML = "";

        for(var i = 0; i < this.blocks; i++){
            var info = this.dataArr[i];
            // 创建元素
            var oBlock = document.createElement("div");
            oBlock.className = "block";
            oBlock.style.width = blockWidth+"px";
            oBlock.style.height = blockHeight+"px";
            oBlock.setAttribute("data-index", info.index );
            
            // 创建元素
            var oPic = document.createElement("div");
            oPic.className = "pic";
            oPic.style.backgroundImage = info.url;

            // 把oPic元素追加到oBlock中
            oBlock.appendChild( oPic );

            // 把oBlock元素追加到this.el元素中
            this.el.appendChild( oBlock );
        }

        this.stepDom.innerHTML = this.stepNum+"步";
        this.progressDom.innerHTML = this.turnNum/2+"/"+this.blocks/2;
    },

    // 监听事件
    handle:function(){
        var self = this;
        // 使用事件委托
        this.el.onclick = function(e){
            var dom = e.target;
            // 判断是否包含.block类名
            var isBlock = dom.classList.contains("block");
            if(isBlock){
                self.handleBlock( dom );
            }
        }

        this.level_select.onchange = function(){
            if( this.value > 0 ){
                game.init({
                    el : document.getElementById("game"),
                    level : this.value,
                });
                
                self.level = this.value;
            }
        }

        this.new_game.onclick = function(){
            game.init({
                el : document.getElementById("game"),
                level : self.level,
            });
        }
    },

    // block被点击以后,对应触发的事件
    handleBlock:function( dom ){
        if( this.gameTime == 0 ){
            this.gameTime = new Date().getTime();
        }

        var index = dom.getAttribute("data-index");

        var judgeLength = this.judgeArr.push({
            index:index,
            dom:dom,
        })
        
        dom.classList.add("on");

        this.stepNum++;
        this.stepDom.innerHTML = this.stepNum+"步";


        if( judgeLength%2 == 0){

            // 比对函数
            this.judgePic();
        }

        // 判断是否胜利了
        this.judgeWin();


    },

    // 比对函数
    judgePic:function(){
        var judgeArr = this.judgeArr;
        var isSamePic = judgeArr[0].index ===  judgeArr[1].index;
        if( isSamePic ){
            this.turnNum += 2;
            this.progressDom.innerHTML = this.turnNum/2+"/"+this.blocks/2;
            
            judgeArr[0].dom.classList.add("done");
            judgeArr[1].dom.classList.add("done");
        }else{
            var dom1 = judgeArr[0].dom;
            var dom2 = judgeArr[1].dom;
            setTimeout(function(){
                dom1.classList.remove("on");
                dom2.classList.remove("on");
            },800)
        }

        judgeArr.length = 0;
    },

    // 判断胜利的函数
    judgeWin:function(){
        var self = this;
        if( this.turnNum == this.blocks ){
            // 得到相差时间戳
            var timestamp = new Date().getTime()-this.gameTime;
            // var timestamp = 6100;
            // 把单位毫秒转成秒
            timestamp =  timestamp / 1000 ;
            // 转成分
            var minutes = Math.floor( timestamp/60 );
            // 剩余的转成秒
            var seconds = (timestamp%60).toFixed(3);

            setTimeout(function(){
                if( minutes > 0 ){
                    alert("恭喜你，游戏通关！总共用了"+self.stepNum+"步，总用时 "+minutes+"分 "+seconds+" 秒");
                }else{
                    alert("恭喜你，游戏通关！总共用了"+self.stepNum+"步，总用时"+seconds+" 秒");
                }
            },300)
        }
    }

}